
.integral {
  height: 100vh;

  .integral-wrapper {
    position: relative;

    .integral-bg {
      width: 100%;
      height: 485rpx;
      background: @color-green;
      text-align: center;
      padding-top: calc(17rpx + env(safe-area-inset-top));

      .integral-title {
        font-family: 'ali-m';
        font-size: @font-size-31;
        color: @color-font;
      }
    }

    .integral-space {
      height: 100rpx;
    }

    .integral-box {
      background-color: @color-font;
      margin: 0 20rpx;
      padding: 45rpx;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      position: absolute;
      bottom: 30rpx;
      width: calc(100% - 130rpx);
      border-radius: 33rpx;

      .integral-box-head {
        font-family: 'ali-m';
        font-size: @font-size-31;
        color: @color-black;
      }

      .integral-box-content {
        font-family: 'ali';
        font-size: @font-size-23;
        color: @color-label;
        margin: 40rpx 0;

        .integral-total {
          font-family: 'din';
          font-weight: bold;
          font-size: @font-size-65;
          color: @color-green;
        }

        .tip {
          color: @color-green;
        }
      }

      .integral-box-footer {
        display: flex;
        justify-content: space-around;
        width: 70%;

        .mini-btn {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 180rpx;
          height: 60rpx;
          font-family: 'ali-m';

        }
      }
    }
  }

  .date-filter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20rpx 15rpx;

    .date-box {
      font-size: @font-size-31;
      font-family: 'din';
      color: @color-black;

      .icon-calendar {
        font-size: 40rpx;
        color: @color-black;
        margin-right: 10rpx;
      }

      :deep(.uni-calendar__content) {
        // height: 100%;
      }
    }

    .money-total {
      font-size: @font-size-23;
      font-family: 'ali';
      color: @color-black;

      .count {
        font-size: @font-size-31;
        font-family: 'din';
        color: @color-green;

        &.expenses-total {
          color: @color-red;
        }
      }
    }
  }

  .integral-box {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    border-bottom: 1px solid @color-line;
    padding: 20rpx 15rpx;

    &.expenses {
      .i-b-count {
        color: @color-red;
      }
    }

    .i-b-left {
      display: flex;
      flex-direction: column;

      .i-b-title {
        font-size: @font-size-31;
        font-family: 'ali';
        color: @color-black;
        margin-bottom: 40rpx;
      }

      .i-b-text {
        font-size: @font-size-23;
        font-family: 'ali';
        color: @color-grey;
        margin-bottom: 20rpx;
      }
    }

    .i-b-count {
      font-size: @font-size-39;
      font-family: 'din';
      font-weight: bold;
      color: @color-green;
      margin-bottom: 10rpx;

      .i-b-tip {
        font-size: @font-size-23
      }
    }
  }

  .light-box-wrapper {
    height: calc(100vh - 585rpx);

    :deep(.box-body) {
      height: 100%;
    }
  }

  .integral-group {
    background-color: @color-font;
    padding: 10rpx 20rpx;
  }
}

.fixedManual {
  position: fixed;
  // top: var(--window-top);
  top: 80rpx;
  z-index: 88;
}

.fixedManual, .scroll-h {
  /* #ifdef H5 */
  width: 100%;
  /* #endif */
  height: 80rpx;
  flex-direction: row;
  /* #ifndef APP-PLUS */
  white-space: nowrap;
  /* #endif */
  white-space: nowrap;
  text-align: center;
  background-color: #fff;

  .uni-tab-item {
    display: inline-block;
    flex-wrap: nowrap;
    padding-left: 34rpx;
    padding-right: 34rpx;
  }

  .uni-tab-item-title {
    color: #555;
    font-size: 30rpx;
    height: 80rpx;
    line-height: 80rpx;
    flex-wrap: nowrap;
  }

  .uni-tab-item-title-active {
    padding: 6px 0;
    // color: #007aff;
    color: black;
    border-bottom-style: solid;
    border-bottom-width: 10rpx;
    border-radius: 5rpx;
    border-color: #00B588;
  }
}

.popup-content {
  height: calc(70vh - var(--window-top));
  overflow-y: auto;
}

.integralRule {
  padding: 40rpx;
  font-size: 31rpx;
  font-family: "ali";

  .title {
    text-align: center;
    margin-bottom: 32rpx;
  }

  .content {
    font-size: 32rpx;
    color: #9a9a9a;
    line-height: 1.75;
    background-color: #ffffff;

    .p {
      margin-bottom: 35rpx;
      text-indent: 2em;
    }
  }
}
